<template>
  <div id="building">
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"  style="width: 30%;margin-left: 35%;margin-top: 200px;">
      <el-form-item label="账号" prop="name" style="color: #ffffff;font-size: 30px">
        <el-input type="text" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" style="width: 100%">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import appvue from '../App'
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        name: "abcde",
        pwd: '123456',
      }
    }
  },
  created() {
  },
  methods: {
    handleLogin() {
      console.log(this.ruleForm)
      this.$axios({
        method: 'post',
        url: '/user/login',
        data: {
          name: this.ruleForm.name,
          pwd: this.ruleForm.pwd
        }
      })
        .then(res => {
          //获取token存入客户端本地
          localStorage.setItem('token',res.data.data.token)
          if (res.data.code === 2000) {
            appvue.showLoginAndRegister=false
            this.$router.push('/')
            location.reload()
          }else {
            alert(res.data.message)
          }
        })
    }
  }
};
</script>

<style scoped>

#building{
  background:url("https://ghxt-atlbb.oss-cn-zhangjiakou.aliyuncs.com/image/banner1653649563000.jpg") no-repeat;
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
</style>
